<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Happy Birthday To You</title>
<link href="css/reset.css" rel="stylesheet" media="screen">
<link href="css/style.css" rel="stylesheet" media="screen">
<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.3.4.css" media="screen" />

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

</head>

<body>
<div id="page">
  <aside id="sidebar">
    <nav><a class="logo" href="#top" id="nav-logo"><span>Happy Birthday</span>To You 陶</a>
      <ul>
     	<li class="active" id="nav-1"><a href="#home">Look This</a></li>
        <li id="nav-2"><a href="#work">Toast</a></li>
        <li id="nav-3"><a href="#about">About</a></li>
        <li id="nav-4"><a href="#contact">Contact</a></li>
      </ul>
      <div class="bg_bottom"></div>
    </nav>
  </aside>
  <div id="main-content">
  	<section id="top"></section><!-- do not remove ;)-->
    <section id="home">
      <div id="loader" class="loader"></div>
      <div id="ps_container" class="ps_container"> <span class="ribbon"></span>
        <div class="ps_image_wrapper"> 
          <!-- First initial image --> 
          <img src="images/1.jpg" alt="" /> </div>
        <!-- Navigation items -->
        <div class="ps_next"></div>
        <div class="ps_prev"></div>
        <!-- Dot list with thumbnail preview -->
        <ul class="ps_nav">
          <li class="selected"><a href="images/1.jpg" rel="images/thumbs/1.jpg">Image 1</a></li>
          <li><a href="images/2.jpg" rel="images/thumbs/2.jpg">Image 2</a></li>
          <li><a href="images/3.jpg" rel="images/thumbs/3.jpg">Image 3</a></li>
          <li><a href="images/4.jpg" rel="images/thumbs/4.jpg">Image 4</a></li>
          <li><a href="images/5.jpg" rel="images/thumbs/5.jpg">Image 5</a></li>
          <li class="ps_preview">
            <div class="ps_preview_wrapper"> 
              <!-- Thumbnail comes here --> 
            </div>
            <!-- Little triangle --> 
            <span></span> </li>
        </ul>
      </div>
      <!--end ps_container-->
      <header class="divider intro-text">
      	<h2><font color="#EE2C2C">Happy BirthDay!</font></h2>
        <h3>Beautiful Websites For You</h3>
       <!-- <div class="contact-me"><a class="contact button" href="#contact">Contact Me</a></div>-->
      </header>
      <div class="recent-work columns">
        <h3>Look This</h3>
        <div class="two-column">
          <figure><a href="images/pricing_table_3.jpg" rel="recent_work" class="zoom"><img src="images/work_1.jpg" alt="Image"></a></figure>
        </div>
        <div class="two-column last">
          <figure><a href="images/pricing_table_3.jpg" rel="recent_work" class="zoom"><img src="images/work_2.jpg" alt="Image"></a></figure>
        </div>
      </div>
      <div class="one-column columns testimony">
        <div class="clearfix says">
        <figure class="marginRight"><img src="images/thumbs/3.jpg" alt="Image" /></figure>
        <blockquote>
          <p>这是我在辰山植物园拍的海棠,非常好看,所以贴出来.</p>
          <cite>&mdash; <a href="#">Hunk D</a></cite> </blockquote>
        </div>
        <div class="clearfix says">
        <figure class="marginRight"><img src="images/thumbs/4.jpg" alt="Image" /></figure>
        <blockquote>
          <p>好像是9月的哪一天下午傍晚,我看见天空出现难得看见的火烧云,正好拍了下来.</p>
          <cite>&mdash; <a href="#">Hunk D</a></cite> </blockquote>
        </div> 
        <div class="clearfix says">
        <figure class="marginRight"><img src="images/thumbs/5.jpg" alt="Image" /></figure>
        <blockquote>
          <p>原本想成为设计师的我,却阴差阳错地变成了程序员.正是这个阴差阳错，我做出了这个网站.想起了V的那句话,世界上没有巧合，只有巧合的假象(There is no coincidence,Only the illusion of coincidence.)</p>
          <cite>&mdash; <a href="#">Hunk D</a></cite> </blockquote>
        </div> 
      </div>      
    </section> <!--end section-->
    
    <section id="work" class="clearfix">
      <header>
        <h2>Toast</h2>
      </header>
      <figure><img src="images/Happy.jpg" alt="Image" /></figure><br>      
      <div style="margin-left: 20px">
	      <p style="font-size: 21px">生日是一生中最特别的日子之一，</p>
	      <p style="font-size: 21px">来到这个繁华世界的你,</p>
	      <p style="font-size: 21px">今天又留下了一份痕迹，</p>
	      <p style="font-size: 21px">每一年这份痕迹飘起的是和这个繁华世界共舞的美丽芬芳。</p>
	      <p style="font-size: 21px">若回首，浮世如梦。望远方，锦绣前程。</p>
	      <p style="font-size: 21px">祝福你生日快乐。</p>
      </div>
    </section> <!--end section-->
    <section id="about" class="clearfix">
      <header>
        <h2>Who is this Guy?</h2>
      </header>
      
      <figure class="marginRight"><img src="images/me.jpg" alt="Image" /></figure>
        <p>My Name is Deng YuXuan.</p><br> 
        <p>You can call me Hunk if you like.</p>
       	<div class="clearfix"></div>
        <h3>Skills For This Page</h3>
        <ul class="skills">
        	<li>Design <span class="bar_100"><span class="percent">100%</span></span></li>
        	<li>HTML5 / CSS3 <span class="bar_90"><span class="percent">90%</span></span></li>
            <li>Wordpress / CMS<span class="bar_50"><span class="percent">50%</span></span></li>
            <li>jQuery<span class="bar_70"><span class="percent">70%</span></span></li>
            <li>Search Engine Optimzation<span class="bar_60"><span class="percent">60%</span></span></li>
        </ul>
        
    </section> <!--end section-->
    <section id="contact" class="clearfix">
      <header>
        <h2>Get in touch</h2>
      </header>
      
      <form action="MsgServlet" method="post" target="subFrame">
      	<p><input type="text" name="name"  value="Your Name" id="name" onblur="if (this.value == ''){this.value = 'Your Name'; }" onfocus="if (this.value == 'Your Name') {this.value = '';}" /></p>
        <p><input type="text" name="email" value="Your Email" id="email"  onblur="if (this.value == ''){this.value = 'Your Email(xxx@live.com)'; }" onfocus="if (this.value == 'Your Email(xxx@live.com)') {this.value = '';}" /></p>
        <p><textarea cols="20" rows="7" name="message" id="message" onblur="if (this.value == ''){this.value = 'Your Message'; }" onfocus="if (this.value == 'Your Message') {this.value = '';}" >Your Message</textarea></p>
        <p><input type="submit" name="submit" value="Send Message" class="button" /></p>
      </form>
      <iframe id="subFrame" name="subFrame" src="" hidden="true"></iframe>        
      <div class="copyright">
      	<p><small>Created by Hunk Deng</small></p>
      	<p><small>Powered by Speckyboy</small></p>
      </div><!--end copyright-->
    </section> <!--end section-->
  </div>
</div>
<script type="text/javascript" src="js/jquery-1.4.3.min.js"></script> 
<script type="text/javascript" src="js/jquery_003.js"></script> 
<script type="text/javascript" src="js/jquery.js"></script> 

<!-- The JavaScript --> 
<script type="text/javascript">
			/*
			the images preload plugin
			*/
			(function($) {
				$.fn.preload = function(options) {
					var opts 	= $.extend({}, $.fn.preload.defaults, options),
						o		= $.meta ? $.extend({}, opts, this.data()) : opts;
					return this.each(function() {
						var $e	= $(this),
							t	= $e.attr('rel'),
							i	= $e.attr('href'),
							l	= 0;
						$('<img/>').load(function(i){
							++l;
							if(l==2) o.onComplete();
						}).attr('src',i);	
						$('<img/>').load(function(i){
							++l;
							if(l==2) o.onComplete();
						}).attr('src',t);	
					});
				};
				$.fn.preload.defaults = {
					onComplete	: function(){return false;}
				};
			})(jQuery);
		</script> 
<script type="text/javascript">
			$(function() {
				//some elements..
				var $ps_container		= $('#ps_container'),
					$ps_image_wrapper 	= $ps_container.find('.ps_image_wrapper'),
					$ps_next			= $ps_container.find('.ps_next'),
					$ps_prev			= $ps_container.find('.ps_prev'),
					$ps_nav				= $ps_container.find('.ps_nav'),
					$tooltip			= $ps_container.find('.ps_preview'),
					$ps_preview_wrapper = $tooltip.find('.ps_preview_wrapper'),
					$links				= $ps_nav.children('li').not($tooltip),
					total_images		= $links.length,
					currentHovered		= -1,
					current				= 0,
					$loader				= $('#loader');
				
				/*check if you are using a browser*/	
				var ie 				= false;
				if ($.browser.msie) {
					ie = true;//you are not!Anyway let's give it a try
				}
				if(!ie)
					$tooltip.css({
						opacity	: 0
					}).show();
					
					
				/*first preload images (thumbs and large images)*/
				var loaded	= 0;
				$links.each(function(i){
					var $link 	= $(this);
					$link.find('a').preload({
						onComplete	: function(){
							++loaded;
							if(loaded == total_images){
								//all images preloaded,
								//show ps_container and initialize events
								$loader.hide();
								$ps_container.show();
								//when mouse enters the pages (the dots),
								//show the tooltip,
								//when mouse leaves hide the tooltip,
								//clicking on one will display the respective image	
								$links.bind('mouseenter',showTooltip)
									  .bind('mouseleave',hideTooltip)
									  .bind('click',showImage);
								//navigate through the images
								$ps_next.bind('click',nextImage);
								$ps_prev.bind('click',prevImage);
							}
						}
					});
				});
				
				function showTooltip(){
					var $link			= $(this),
						idx				= $link.index(),
						linkOuterWidth	= $link.outerWidth(),
						//this holds the left value for the next position
						//of the tooltip
						left			= parseFloat(idx * linkOuterWidth) - $tooltip.width()/2 + linkOuterWidth/2,
						//the thumb image source
						$thumb			= $link.find('a').attr('rel'),
						imageLeft;
					
					//if we are not hovering the current one
					if(currentHovered != idx){
						//check if we will animate left->right or right->left
						if(currentHovered != -1){
							if(currentHovered < idx){
								imageLeft	= 75;
							}
							else{
								imageLeft	= -75;
							}
						}
						currentHovered = idx;
						
						//the next thumb image to be shown in the tooltip
						var $newImage = $('<img/>').css('left','0px')
												   .attr('src',$thumb);
						
						//if theres more than 1 image 
						//(if we would move the mouse too fast it would probably happen)
						//then remove the oldest one (:last)
						if($ps_preview_wrapper.children().length > 1)
							$ps_preview_wrapper.children(':last').remove();
						
						//prepend the new image
						$ps_preview_wrapper.prepend($newImage);
						
						var $tooltip_imgs		= $ps_preview_wrapper.children(),
							tooltip_imgs_count	= $tooltip_imgs.length;
							
						//if theres 2 images on the tooltip
						//animate the current one out, and the new one in
						if(tooltip_imgs_count > 1){
							$tooltip_imgs.eq(tooltip_imgs_count-1)
										 .stop()
										 .animate({
											left:-imageLeft+'px'
										  },150,function(){
												//remove the old one
												$(this).remove();
										  });
							$tooltip_imgs.eq(0)
										 .css('left',imageLeft + 'px')
										 .stop()
										 .animate({
											left:'0px'
										  },150);
						}
					}
					//if we are not using a "browser", we just show the tooltip,
					//otherwise we fade it
					//
					if(ie)
						$tooltip.css('left',left + 'px').show();
					else
					$tooltip.stop()
							.animate({
								left		: left + 'px',
								opacity		: 1
							},150);
				}
				
				function hideTooltip(){
					//hide / fade out the tooltip
					if(ie)
						$tooltip.hide();
					else
					$tooltip.stop()
						    .animate({
								opacity		: 0
							},150);
				}
				
				function showImage(e){
					var $link				= $(this),
						idx					= $link.index(),
						$image				= $link.find('a').attr('href'),
						$currentImage 		= $ps_image_wrapper.find('img'),
						currentImageWidth	= $currentImage.width();
					
					//if we click the current one return
					if(current == idx) return false;
					
					//add class selected to the current page / dot
					$links.eq(current).removeClass('selected');
					$link.addClass('selected');
					
					//the new image element
					var $newImage = $('<img/>').css('left',currentImageWidth + 'px')
											   .attr('src',$image);
					
					//if the wrapper has more than one image, remove oldest
					if($ps_image_wrapper.children().length > 1)
						$ps_image_wrapper.children(':last').remove();
					
					//prepend the new image
					$ps_image_wrapper.prepend($newImage);
					
					//the new image width. 
					//This will be the new width of the ps_image_wrapper
					var newImageWidth	= $newImage.width();
				
					//check animation direction
					if(current > idx){
						$newImage.css('left',-newImageWidth + 'px');
						currentImageWidth = -newImageWidth;
					}	
					current = idx;
					//animate the new width of the ps_image_wrapper 
					//(same like new image width)
					$ps_image_wrapper.stop().animate({
					    width	: newImageWidth + 'px'
					},350);
					//animate the new image in
					$newImage.stop().animate({
					    left	: '0px'
					},350);
					//animate the old image out
					$currentImage.stop().animate({
					    left	: -currentImageWidth + 'px'
					},350);
				
					e.preventDefault();
				}				
				
				function nextImage(){
					if(current < total_images){
						$links.eq(current+1).trigger('click');
					}
				}
				function prevImage(){
					if(current > 0){
						$links.eq(current-1).trigger('click');
					}
				}
			});
        </script>
        <script type="text/javascript" src="fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript">

		$(document).ready(function() {
			
			
			$('.projects li figure a img').animate({'opacity' : 1}).hover(function() {
				$(this).animate({'opacity' : .5});
			}, function() {
				$(this).animate({'opacity' : 1});
			});
			$('.zoom img').animate({'opacity' : 1}).hover(function() {
				$(this).animate({'opacity' : .5});
			}, function() {
				$(this).animate({'opacity' : 1});
			});

			$("a[rel=work]").fancybox({
				'transitionIn'		: 'elastic',
				'transitionOut'		: 'elastic',
				'titlePosition' 	: 'over',
				'titleFormat'		: function(title, currentArray, currentIndex, currentOpts) {
					return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
				}
			});
			$("a[rel=recent_work]").fancybox({
				'transitionIn'		: 'elastic',
				'transitionOut'		: 'elastic',
				'titlePosition' 	: 'over',
				'titleFormat'		: function(title, currentArray, currentIndex, currentOpts) {
					return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
				}
			});

			
		});
	</script>
</body>
</html>
